<template>
  <div class="content">
    <!-- 表格区域 -->
    <el-table height="80.5vh" :data="logsList" style="width: 100%" :header-cell-style="{color:'black'}">
      <el-table-column label="编号" prop="id" min-width="40px" />
      <el-table-column label="授权类型" prop="auth_model_display" min-width="100px">
        <template v-slot="scope">{{ scope.row.auth_model_display==='GALLERY'?'图库':'其它' }}</template>
      </el-table-column>
      <el-table-column label="申请理由" prop="content" min-width="100px" />
      <el-table-column label="申请标签" min-width="100px">
        <template v-slot="scope">
          <el-tag>{{ scope.row.get_tag===null ? '' : scope.row.get_tag.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="授权状态" min-width="100px">
        <template v-slot="scope">
          <el-tag
            :type="tagTypeOptions[scope.row.status_display]"
            effect="dark"
          >{{ useTypeOptions[scope.row.status_display] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="created_at" min-width="100px" />
      <el-table-column label="审核人" width="140px">
        <template
          v-slot="scope"
        >
          <span v-if="scope.row.get_admin===null">----</span>
          <span v-else>
            <!-- <span v-if="scope.row.get_admin.real_name.length>8" :title="scope.row.get_admin.real_name">{{ scope.row.get_admin.real_name | beyondWidth(140) }}</span>
            <span v-else>{{ scope.row.get_admin.real_name }}</span> -->
            <tool :content="scope.row.get_admin.real_name">
              {{ scope.row.get_admin.real_name }}
            </tool>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" min-width="100px">
        <template
          v-slot="scope"
        >{{ scope.row.check_datetime===null ? '----' : scope.row.check_datetime }}</template>
      </el-table-column>
      <el-table-column label="审核结果">
        <template
          v-slot="scope"
        >{{ scope.row.check_content===null ? '----' : scope.row.check_content }}</template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="dingwei">
      <el-pagination
        :current-page="query.page"
        :page-sizes="$arrays.tableSize"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getLogsList } from '@/api/gallery'
import tool from '@/components/tool'
export default {
  name: 'Authorize',
  components: { tool },
  data() {
    return {
      logsList: [],
      query: {
        page: 1,
        limit: 20
      },
      // content: {
      content: {
        content: ''
      },
      total: 0,
      tagDisplayName: '',
      id: '',
      useTypeOptions: {
        REJECT: '已拒绝',
        WAIT: '待审核',
        ALLOW: '已授权'
      },
      tagTypeOptions: {
        REJECT: 'danger',
        WAIT: 'warning',
        ALLOW: ''
      },
      downloadFileDialogVisible: false,
      ruleForm: {
        name: ''
      },
      rules: {
        name: []
      }
    }
  },
  created() {
    this.getLogsList()
  },
  methods: {
    getLogsList() {
      getLogsList(this.query).then((res) => {
        this.total = res.data.data.total
        this.logsList = res.data.data.data
        console.log(this.logsList)
      })
    },
    handleSizeChange(newPageSize) {
      this.query.limit = newPageSize
      this.getLogsList()
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getLogsList()
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 24px;
}
.dialog {
  .stars {
    margin-top: 0;
    margin-bottom: 0;
  }
  .stars {
    margin-bottom: 16px;
    display: inline-block;
  }
  .stars::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}
.dingwei{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 50px;
  padding-top: 40px;
  z-index: 1000;
  // background-color: black;
}
</style>

